<template>
  <view class="address">

    <view class="basic-flex-horizontal item" v-for="(item,index) in dataList" :key="index" @click="clickAddress(item)">
      <image class="icon" src="/static/base/icon_5dz.png"></image>
      <view class="main">
        <view class="basic-flex-horizontal name">
          <view class="people">{{ item.name || '暂无' }}</view>
          <text class="phone">{{ item.phone || '暂无' }}</text>
          <view v-if="item.is_top===1" class="tag">默认</view>
        </view>
        <view class="province">
          {{ item.city || '暂无' }}{{ item.address || '暂无' }}
        </view>
      </view>
      <image class="right_icon" src="/static/base/icon_bj_888.png" @click.stop="jumpAdd('edit',item.id)"></image>
    </view>

    <view class="base-bottom base-btn" @click="jumpAdd()">新增收货地址</view>

  </view>
</template>

<script>


import {creatAddress, delAddress, getUserAddress} from "../configure/api/my";
import page from "../configure/mixins/page";

export default {
  mixins: [page],
  data() {
    return {
      isOrder: false,
    };
  },
  onLoad(e) {
    this.isOrder = !!e.isOrder
  },
  onShow() {
    this.pageNum = 1; // 初始化为第一页
    this.queryAddressList()
  },
  methods: {
    queryAddressList() {
      getUserAddress({
        page: this.pageNum,
        page_size: this.pageSize,
      }).then(res => {
        this.handlePaginationResponse(res);
      })
    },
    editDefault(item) {
      creatAddress({address_id: item.id, is_top: 1}).then(res => {
        this.pageNum = 1; // 初始化为第一页
        this.queryAddressList()
        setTimeout(() => {
          this.$tip('设置成功', 'success');
        }, 500);
      })
    },
    clickAddress(val) {
      if (this.isOrder) {
        uni.$emit('updateAddressData', val)
        this.$utils.back()
      }
    },
    jumpAdd(code, id) {
      this.$utils.jumpPage(`/pages_other/add_address?code=${code || ''}&id=${id || ''}`)
    },
    deleteAddress(val) {
      this.$tip('是否删除地址', 'ask', () => {
        delAddress({
          address_id: val.id
        }).then(res => {
          this.pageNum = 1; // 初始化为第一页
          this.queryAddressList()
          setTimeout(() => {
            this.$tip('删除成功', 'success');
          }, 500);
        })
      })
    },
  },
}
</script>
<style>
page {
  background: #F7F8FA;
}
</style>
<style lang="scss" scoped>
.address {

  & > .item {
    margin: 10px 12px;
    padding: 14px 12px 13px;
    background: #FFFFFF;
    border-radius: 10px;
    gap: 12px;

    & > .icon {
      width: 18px;
      height: 18px;
    }

    & > .main {
      flex: 1;

      & > .name {
        margin-bottom: 8px;
        gap: 10px;

        & > .people {
          font-weight: bold;
          font-size: 16px;
          color: #000000;
        }

        & > .phone {
          font-weight: 500;
          font-size: 14px;
          color: #333333;
        }

        & > .tag {
          font-weight: 500;
          font-size: 10px;
          color: #FFFFFF;
          padding: 1px 4px;
          background: #FE1C41;
          border-radius: 2px;
        }
      }

      & > .province {
        font-weight: 500;
        font-size: 14px;
        color: #666666;
        line-height: 20px;
      }

    }

    & > .right_icon {
      width: 20px;
      height: 20px;
    }

  }

}
</style>